<template>
  <div>
    <!-- 查询条件区域 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
         <el-form-item label="学生姓名" prop="stuName" >
            <el-input
               v-model="queryParams.stuName"
               placeholder="请输入学生姓名"
               clearable
               style="width: 200px"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="市场部" prop="origin" >
            <el-select v-model="queryParams.origin" placeholder="选择市场部" clearable style="width: 200px">
               <el-option
                  v-for="dict in originOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
               />
            </el-select>
         </el-form-item>
         <el-form-item label="学院" prop="collegeId">
            <el-select v-model="queryParams.collegeId" placeholder="选择学院" clearable style="width: 200px">
              <el-option label="游戏学院" :value="1" />
              <el-option label="网站工程学院" :value="2" />
            </el-select>
         </el-form-item>
         <el-form-item label="工作城市" prop="workCity">
          <CitySelect v-model="queryParams.workCity" ></CitySelect>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
      </el-form>
      <!-- 按钮区域 -->
      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
            <el-button
               type="primary"
               plain
               icon="Plus"
               v-hasPermi="['screen:job:add']"
            >新增学生</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button 
               type="info"
               plain
               icon="Sort"
               v-hasPermi="['screen:job:delAll']"

            >批量删除</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button 
               type="info"
               plain
               icon="Sort"
               v-hasPermi="['screen:job:import']"
               
               >导入</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button 
               type="info"
               plain
               icon="Sort"
               v-hasPermi="['screen:job:export']"

            >导出</el-button>
         </el-col>
         <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> -->
         <right-toolbar v-model="showSearch" @queryTable="getList"></right-toolbar>

      </el-row>

       <!-- 列表区域 -->
      <BaseTable v-bind="TableConfig" @deleteAll=getDeleteAllIds>
          <template #Operate="scope">
              <el-button type="primary" size="small" @click="searchFn(scope.rowData)">查看</el-button>
              <el-button type="primary" size="small" @click="compileFn(scope.rowData)">编辑</el-button>
              <el-button type="primary" size="small" @click="handleDelete(scope.rowData.id)">删除</el-button>
          </template>
      </BaseTable>
  </div>
</template>

<script setup>
import BaseTable from '@/components/BaseTable.vue';
import {jobListMenu } from "@/api/bigScreen/index";
import CitySelect from '@/components/citySelect/index';
const {proxy} =getCurrentInstance()
const showSearch = ref(true); //是否展示查询区
const originOptions = [
    {
        value: '招生办',
        label: '招生办'
    },
    {
        value: '中原市场部',
        label: '中原市场部'
    },
    {
        value: '春峰市场部',
        label: '春峰市场部'
    },
    {
        value: '苏皖市场部',
        label: '苏皖市场部'
    },
    {
        value: '陕豫市场部',
        label: '陕豫市场部'
    }
];
// 表格配置项
const TableConfig = reactive({
    tableHeader: [  //展示表格哪些列
        { label: "学生姓名", prop: "stuName",  type: "text" },
        { label: "班级", prop: "className", type: "text" },
        { label: "学院名称", prop: "collegeName", type: "text", width: "150" },
        { label: "专业", prop: "expertiseName", type: "text" },
        { label: "上班城市", prop: "workCity", type: "text" },
        { label: "毕业薪资", prop: "salary", type: "text" },
        { label: "学生状态", prop: "status", type: "text" },
        { label: "市场部来源", prop: "origin", type: "text" ,width: "80"},
        { label: "毕业年份", prop: "gradYear", type: "text" },
        { label: "创建时间", prop: "createdTime", type: "text", width: "150" },
        { label: "操作列", prop: "Operate", type: "slot", align:"center", width: "200" },
    ],
    tableData: [],//展示表格数据
    OtherConfig: {
      loading: true,
      showCheckBox: true
    }
})
const data = reactive({
  // form: {},
  queryParams: {
    limit: 10,
    skip: 0
  }
});
const { queryParams } = toRefs(data);

/**查看详情*/ 
function searchFn(){}
/**编辑*/ 
function compileFn(){}
/**删除*/ 
function handleDelete(){}
/** 批量删除 */
function getDeleteAllIds(){}

/** 重置按钮操作 */

function resetQuery() {
  // proxy.resetForm("queryRef");
  // 不能重置
  console.log("proxy.$refs['queryRef']",proxy.$refs['queryRef'].resetFields)
  proxy.$refs['queryRef'].resetFields();

  getList();
}
/** 查询菜单列表 */
function getList() {
  TableConfig.OtherConfig.loading = true;
  jobListMenu(queryParams.value).then(response => {
    TableConfig.tableData = response.data.result;
    setTimeout(()=>{
      TableConfig.OtherConfig.loading = false;
    },2000)
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  getList();
}
getList();
</script>
<style lang='scss' scoped>

</style>    